//function
.function{
    .container{
        position: relative;
        p{
            position: absolute;
            left:1.4em;
            top:-1.5em;
            font-size: 1.3em;
            color:#7e7474;
            border-bottom: 5px solid #fcc72f;
        }

        .box{
            display: flex;
            justify-content: space-around;

            .item{
                width:20%;
                text-align: center;
                cursor: pointer;
                img{
                    margin:1em 0em;
                    margin-bottom: 0em;
                    width:70%;
                    height:59%;
                }
                span{
                    font-size: 10px;
                    a{
                        color:black;
                    }
                }
                    
                
            }
        }
    }
}

//toybanner
.toybanner{
    position: relative;
    margin:2em auto;
    #box{
        position: absolute;
        top:4.5em;
        left:10em;
        display: inline-block;
    }
    
    #tabs{
        width:140px;
        display: flex;
        justify-content: space-between;
    }
    
    #tabs .nav{
        width:50%;
        font-size:13px;
        // line-height:3em;
        text-align: center;
        text-shadow: 0px 0px 10px #000;
        cursor: pointer;
        background-color:yellow;
        color:#fff;
    }
    
    #tabs .active{
        background-color:#fff;
        color:#000;
    }
    
    #content{
        width:140px;
        height:35px;
        position: relative;
        
    }
    
    #content .block{
        position: absolute;
        left:0;
        top:-28px;
        width:100%;
        height:100%;
        line-height:100px;
        font-size:13px;
        text-align: center;
        opacity: 0;
    }
    
    #content .active{
        opacity: 1;
    }

    @media screen and (max-width:320px){
        &{
            position: relative;
            #box{
                position: absolute;
                top:3em;
                left:7em;
                display: inline-block;
            }
        }
    }
}

//block
.block1{
    background-color: #f8f8f6;
    .container{
        
        display: flex;
        justify-content: space-around;

        .left{
            position: relative;
            width:100%;
            height:165px;
            margin:2em auto;
           img{
            border-radius: 5px;
           }
          

            .content{
                position: absolute;
                left:1em;
                top:0.5em;
                span{
                    position: absolute;
                    left:6em;
                    top:.5em;
                    background-color: skyblue;
                    border-radius: 2px;
                    padding:1px 3px;
                    color:white;
                }
            }

        }

        .right{
            width:100%;
            margin:0em 1em;
            margin-bottom: 0;
            img{
                border-radius: 15px;
               }

            .one{
                margin:2em auto;
               

                .content1{
                    margin:-5.5em auto;
                    margin-bottom: 0;
                    h1{
                        font-size:14px;
                    }
                    p{
                        font-size:12px;
                    }
                    a{
                        border:1px solid red;
                        border-radius: 15px;
                        color: red;
                        margin:6px auto;
                        margin-bottom: 0;
                        padding:1px 2px;
                    }
                }
            }

            
            
        }
    }

    @media screen and (max-width:320px){
        &{
            .container{
                .left{
                    .content{
                        h1{
                            font-size:10px;
                        }
                        span{
                            font-size:8px;
                            margin:auto 13px;
                        }
                    }
                }
                .right{
                    .one{
                        position: relative;
                        .content1{
                            position: absolute;
                            top:81px;
                            h1{
                                font-size: 10px;
                            }
                            p{
                                font-size: 8px;
                            }
                            a{
                                font-size: 8px;
                                padding:0 0;
                            }
                        }
                    }
                }
            }
        }
    }
}
